<template>
  <div class="dashboard-container">
    <div class="app-container">
    <el-card shadow="never" >
      <el-form :model="query" label-width="80px" ref="form">
        <el-row justify="space-between" type="flex">
          <el-form-item label="关键字">
            <el-input
              placeholder="根据编号搜索"
              style="width: 280px"
              type="text"
              v-model="query.keyword"/>
          </el-form-item>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-row style="text-align: right">
                <el-button
                  @click="clear"
                  class="el-button el-button--default el-button--small"
                  size="small"
                  type="button"
                  >清除</el-button>
                <el-button
                  @click="search"
                  class="el-button el-button--primary el-button--small"
                  size="small"
                  type="primary"
                  >搜索</el-button>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-form>

      <div
        class="el-alert alert el-alert--info is-light"
        role="alert"
        style="margin-bottom: 15px"
      >
        <i class="el-alert__icon el-icon-info"></i>
        <div class="el-alert__content">
          <span class="el-alert__title">数据一共{{ count }}条</span>
          <i class="el-alert__closebtn el-icon-close" style="display: none"></i>
        </div>
      </div>

      <el-table :data="data" style="width: 100%" :header-cell-style="headerStyle">
        <el-table-column
          fixed
          width="200"
          label="编号"
          prop="id"/>
        <el-table-column label="题型" prop="questionType">
          <template slot-scope="scope">
            <p v-if="scope.row.questionType === '1'">单选</p>
            <p v-else-if="scope.row.questionType === '2'">多选</p>
            <p v-else>简答</p>
          </template>
        </el-table-column>
        <el-table-column
          class-name="tableRow"
          label-class-name="tableRowLabel"
          label="题目编号"
          prop="questionIDs"
          width="200"
          style="color:blue;"
        >
          <template v-slot="{row}">
            <div :key="index" v-for="(item, index) in row.questionIDs">
              <!-- <el-button @click="btn(scope.row.id)" class="btnl">{{item.number}}</el-button> -->
              <a @click="previewBtn(item.id)">{{ item.number }}</a>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="录入时间"
          prop="addTime"
        >
        <template v-slot="{row}">
            {{row.addTime}}
        </template>
        </el-table-column>
        <el-table-column
          label="答题时间"
          prop="totalSeconds"/>
        <el-table-column
          label="正确率"
          prop="accuracyRate"/>
        <el-table-column
          label="录入人"
          prop="userName"/>
        <el-table-column fixed="right" label="操作" >
          <template slot-scope="{ row }">
            <el-button
              @click="del(row)"
              circle
              icon="el-icon-delete"
              plain
              type="danger"/>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page="query.page"
        :page-size="query.pagesize"
        :page-sizes="[10, 20, 30, 40]"
        :total="count"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        background
        layout="prev, pager, next, sizes, jumper"
        style="text-align: right; margin-top: 20px; margin-bottom: 15px"
      ></el-pagination>
    </el-card>
    <questionDialog
      :showQuestionDialog.sync="showQuestionDialog"
      @update-list="updateList"
      ref="showQuestionDialog"
    ></questionDialog>
  </div>
   </div>
</template>

<script>
import { getQuestionsList, delQuestionsRandoms } from '@/api/hmmm/questions'
import questionDialog from '../components/question-dialog.vue'
export default {
  components: {
    questionDialog
  },
  methods: {
    // 表头行样式
    headerStyle () {
      return 'border-bottom: 3px solid #e8e8e8;background-color: #fafafa;'
    },
    deleteRow (index, rows) {
      rows.splice(index, 1)
    },
    handleSizeChange (size) {
      this.query.pagesize = size
      this.query.keyword = ''
      this.getQuestionsList()
    },
    handleCurrentChange (page) {
      this.query.page = page
      this.query.keyword = ''
      this.getQuestionsList()
    },
    async getQuestionsList () {
      try {
        const {
          data: { counts, items }
        } = await getQuestionsList(this.query)
        this.data = items
        this.count = counts
      } catch (error) {
        console.log(error)
      }
    },
    clear () {
      this.query.keyword = ''
      this.getQuestionsList()
    },
    async del (id) {
      console.log(id)
      try {
        await this.$confirm('确定要删除吗')
        await delQuestionsRandoms(id)
        this.$message.success('删除成功')
        const totalPage = Math.ceil((this.count - 1) / this.query.pagesize)
        if (this.query.page > totalPage) {
          this.query.page = totalPage
        }
        this.getQuestionsList()
      } catch (error) {
        console.log(error)
      }
    },
    async search () {
      const { data } = await getQuestionsList(this.query)
      this.count = data.counts
      this.data = data.items
    },
    // 点击题目编号预览
    async previewBtn (id) {
      await this.$refs.showQuestionDialog.getQuestionDetail(id)
      this.showQuestionDialog = true
    },
    updateList () {
      this.showDialog = false
    }
  },
  data () {
    return {
      currentPage2: 5,
      query: {
        page: 1,
        pagesize: 10,
        keyword: ''
      },
      count: 0,
      data: [
        {
          id: 'qq111',
          questionType: '简答',
          questionIDs: 'qq11111',
          addTime: '2023-2-28 11:00:00',
          totalSeconds: '111',
          accuracyRate: '60',
          userName: 'zs'
        },
        {
          id: 'ww222',
          questionType: '多选',
          questionIDs: 'ww22222',
          addTime: '2023-3-1 12:00:00',
          totalSeconds: '2222',
          accuracyRate: '100',
          userName: 'ls'
        }
      ],
      showQuestionDialog: false
    }
  },
  created () {
    this.getQuestionsList()
  }
}
</script>

<style scoped>
element.style {
  margin-bottom: 15px;
}
.el-alert--info.is-light {
  background-color: #f4f4f5;
  color: #909399;
  margin-top: 10px;
}
.el-alert {
  width: 100%;
  padding: 8px 16px;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 4px;
  position: relative;
  background-color: #fff;
  overflow: hidden;
  opacity: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.el-icon-info:before {
  content: "\e7a1";
}
.el-alert__content {
  display: table-cell;
  padding: 0 8px;
}
.el-alert__title {
  font-size: 13px;
  line-height: 18px;
}
.inp {
  padding-left: 10px;
}
.el-button el-button--default el-button--small {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  font-family: inherit;
  overflow: visible;
  text-transform: none;
  -webkit-user-select: none;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  /* color: #606266; */
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  font-size: 12px;
  border-radius: 3px;
  padding: 9px 15px;
}
.el-button el-button--primary el-button--small {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  font-family: inherit;
  overflow: visible;
  text-transform: none;
  -webkit-user-select: none;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
  font-size: 12px;
  border-radius: 3px;
  padding: 9px 15px;
  margin-left: 10px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

</style>

<style>
.tableRow{
    color: #409eff;
}

.tableRowLabel{
    color: #909399;
}
</style>
